// 定义消息组件
import {
    BaseElement, ChatStatus, baseStyle
} from "./base.js";


class ChatConfirmDialog extends BaseElement {
    constructor() {
        super();
        this.attachShadow({
            mode: 'open'
        });
        this.shadowRoot.adoptedStyleSheets = [baseStyle];
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                /* 弹窗样式 */
                .popup-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(0, 0, 0, 0.4);
                    backdrop-filter: blur(2px);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 9000;
                    opacity: 1;
                    transition: opacity 0.25s ease;
                }

                .popup-overlay.hide {
                    opacity: 0;
                    pointer-events: none;
                }

                .popup-container {
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
                    max-width: 400px;
                    width: 80%;
                    padding: 24px;
                    animation: popup-scale 0.25s ease forwards;
                }

                @keyframes popup-scale {
                    from { transform: scale(0.95); opacity: 0; }
                    to { transform: scale(1); opacity: 1; }
                }

                .popup-content .title {
                    margin: 0 0 12px 0;
                    font-size: 18px;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 0.85);
                }

                .popup-content .content {
                    margin: 0 0 24px 0;
                    color: rgba(0, 0, 0, 0.65);
                    line-height: 1.5;
                }

                .popup-actions {
                    display: flex;
                    justify-content: flex-end;
                    gap: 12px;
                }

                .popup-cancel-btn {
                    background: transparent;
                    border: 1px solid rgba(0, 0, 0, 0.15);
                    border-radius: 6px;
                    padding: 8px 16px;
                    cursor: pointer;
                    transition: all 0.2s;
                    font-size: 14px;
                }

                .popup-cancel-btn:hover {
                    background: rgba(0, 0, 0, 0.05);
                    border-color: rgba(0, 0, 0, 0.2);
                }

                .popup-cancel-btn:active {
                    background: rgba(0, 0, 0, 0.1);
                }

                .popup-confirm-btn {
                    background: #ff4d4f;
                    color: white;
                    border: none;
                    border-radius: 6px;
                    padding: 8px 16px;
                    cursor: pointer;
                    transition: all 0.2s;
                    font-size: 14px;
                    font-weight: 500;
                }

                .popup-confirm-btn:hover {
                    background: #ff7875;
                }

                .popup-confirm-btn:active {
                    background: #f5222d;
                }
            </style>
            <!-- 确认弹窗 -->
            <div class="popup-overlay hide">
                <div class="popup-container">
                    <div class="popup-content">
                        <h3 class="title">清空全部消息</h3>
                        <div class="content">您确定要清空当前会话的所有消息记录吗？此操作无法撤销。</div>
                        <div class="popup-actions">
                            <button class="popup-cancel-btn">取消</button>
                            <button class="popup-confirm-btn">确认清空</button>
                        </div>
                    </div>
                </div>
            </div>
        `
    }

    /**
     * 显示确认对话框
     * @param {Object} options - 对话框选项
     * @param {string} options.title - 标题 (默认: "确认操作")
     * @param {string} options.content - 内容 (默认: "您确定要执行此操作吗？")
     * @param {string} options.confirmText - 确认按钮文本 (默认: "确认")
     * @param {string} options.cancelText - 取消按钮文本 (默认: "取消")
     * @returns {Promise<boolean>} - Promise对象，解析为true表示确认，false表示取消
     */
    showConfirm({ title = "确认操作", content = "您确定要执行此操作吗？", confirmText = "确认", cancelText = "取消" } = {}) {
        return new Promise((resolve) => {
            // 获取元素引用
            const overlay = this.shadowRoot.querySelector('.popup-overlay');
            const titleEl = this.shadowRoot.querySelector('.popup-content .title');
            const contentEl = this.shadowRoot.querySelector('.popup-content .content');
            const confirmBtn = this.shadowRoot.querySelector('.popup-confirm-btn');
            const cancelBtn = this.shadowRoot.querySelector('.popup-cancel-btn');

            // 更新内容
            titleEl.innerHTML = title;
            contentEl.innerHTML = content;
            confirmBtn.textContent = confirmText;
            cancelBtn.textContent = cancelText;

            // 显示对话框
            overlay.classList.remove('hide');

            // 处理按钮点击
            const handleConfirm = () => {
                overlay.classList.add('hide');
                cleanupEventListeners();
                resolve(true);
            };

            const handleCancel = () => {
                overlay.classList.add('hide');
                cleanupEventListeners();
                resolve(false);
            };

            // 处理蒙层点击（点击外部关闭对话框）
            const handleOverlayClick = (event) => {
                if (event.target === overlay) {
                    handleCancel();
                }
            };

            // 添加事件监听器
            confirmBtn.addEventListener('click', handleConfirm);
            cancelBtn.addEventListener('click', handleCancel);
            overlay.addEventListener('click', handleOverlayClick);

            // 清理事件监听器
            const cleanupEventListeners = () => {
                confirmBtn.removeEventListener('click', handleConfirm);
                cancelBtn.removeEventListener('click', handleCancel);
                overlay.removeEventListener('click', handleOverlayClick);
            };
        });
    }

}

export default ChatConfirmDialog;